
import React from 'react';

import { api } from 'js/api/base';
import { panelPop } from 'views/panelPop/panelPop';
import Bag from 'views/bag/bag';
import Icon from 'views/component/icon/icon';
import { BattleHandle } from './battle';
import Progress from './progress';
import Draggable from 'react-draggable';
import SVG from 'svg.js';
import './map.scss';
import MapBox from './mapBox';

class Main extends React.Component {
    constructor() {
        super()
        this.panelPopShow = false;
        this.logShow = false;
        this.auto = false;
        this.state = {
            showMonster: false,
            mapType: 1,
            mapInfo: null,
            status: { type: -1, end: false, item: null },
        }
    }
    componentDidMount() {
        // setTimeout(() => {
        //     this.refLog.style.height = (this.refContent.clientHeight - this.refMapContent.clientHeight) + 'px';
        // }, 0)
        // this.draw = SVG('rectangle');
    }
    showBag = () => {
        panelPop.show(<Bag />)
    }
    showBattle = () => {

    }
    save = () => {
        api('save', () => {
            console.log('save');
        });
    }
    explore = () => {
        api('explore', (err, exploreData) => {
            let type = exploreData.type;
            // this.setState({ mapType: 1, status: {}, showMonster: false }, () => {
            switch (type) { //0什么事情也没发生,1遇怪,2陷阱，沼泽,3获得物品,4遇到事件,5遇到npc,6区域boss
                case 0:
                    this.explore0(exploreData)
                    break;
                case 1:
                    panelPop.show(<BattleHandle player={exploreData.player} monster={exploreData.monster} />)
                    break;
                case 2:
                    this.explore2(exploreData)
                    break;
                case 3:
                    this.explore3(exploreData)
                    break;
                case 4:
                    this.explore4(exploreData)
                    break;
                case 5:
                    this.explore5(exploreData)
                    break;
                case 6:
                    this.explore6(exploreData)
                    break;
            }
            // })
        });
    }
    explore0 = (exploreData) => {
        let str = '你发现有地面有一个个巨大的脚印，不知道是什么怪物留下的.';
        this.showText(str, () => {
            this.setState({ status: { type: exploreData.type, end: true, item: exploreData.item } }, () => {
                this.setState({ status: { type: exploreData.type, end: true } }, () => {
                    this.exploreEnd();
                })
            })
        })
    }
    explore1 = (exploreData) => {
        let self = this;
        this.setState({ showMonster: true, status: { type: 1 } }, () => {
            this.refs.battleHandle.setPlayer(exploreData.player);
            this.refs.battleHandle.setMonster(exploreData.monster);
            this.refs.battleHandle.battle(() => {
                this.setState({ showMonster: false }, () => {
                    if (exploreData.battleInfo.result === 1) {
                        let str = `你击败了${exploreData.monster.name},获得了${exploreData.battleInfo.exp}点经验`;
                        this.showText(str, () => {
                            this.setState({ status: { type: 2, end: true, item: exploreData.battleInfo.item } }, () => {
                                this.exploreEnd();
                            });
                        });
                    } else {

                    }

                });
            });
        });
    }
    explore2 = (exploreData) => {
        let str = `你遇到了陷阱,受到了${exploreData.hurt}伤害.`;
        this.showText(str, () => {
            this.setState({ status: { type: 2, end: true } }, () => {
                this.exploreEnd();
            });
        })
    }
    explore3 = (exploreData) => {
        let str = `你发现了`;
        this.showText(str, () => {
            this.setState({ status: { type: 2, end: true, item: exploreData.item } }, () => {
                // setTimeout(() => {
                //     this.getItem();
                // }, 200)
            })
        })
    }
    explore4 = (exploreData) => {
        let eventId = exploreData.eventId;
        let event = window.totalConfig.event[eventId];
        let str = event.desc;
        this.showText(str, () => {
            this.setState({ status: { type: 2, end: true } }, () => {
                // this.exploreEnd();
            })
        })
    }
    explore5 = (exploreData) => {

    }
    explore6 = (exploreData) => {

    }
    exploreEnd = () => {
        if (!this.auto) {
            return
        }
        setTimeout(() => {
            this.setState({ status: { type: -1 }, showMonster: false }, () => {
                this.refs.exporeNode.start();
            })
        }, 200)
    }
    showText = (str, cb) => {
        this.setState({ status: { type: 2, end: false } }, () => {
            let node = this.refs.text;
            let i = 0, strlen = str.length;
            let timer = setInterval(() => {
                i += 1;
                node.innerHTML = str.substring(0, i);
                if (i >= strlen) {
                    clearInterval(timer);
                    cb();
                }
            }, 150);
        })
    }
    getMapInfo = () => {
        console.log(JSON.stringify(this.state.mapLattices));
    }
    getItem = () => {
        api('getItems', (err, data) => {
            if (err === 0) {
                this.state.status.item = null;
                this.setState({ status: this.state.status })
            }
        })
    }
    mapBoxChange = (item) => {
        this.setState({ mapInfo: item, mapType: 2 })
    }
    setLogHeight = () => {
        if (!this.logShow) {
            this.refLog.style.height = this.refContent.clientHeight + 'px';
        } else {
            let height = this.refContent.clientHeight - this.refMapContent.clientHeight;
            this.refLog.style.height = height + 'px';
        }
        this.logShow = !this.logShow;
    }
    render() {
        const { mapInfo } = this.state;
        let propName = window.propName;
        let adventrueInfoNode;
        if (mapInfo) {
            let infoNode = [];
            //1采集,2伐木,3采矿,4钓鱼,5副本,6调查，7解密,探查,8发现新的地形
            let info = mapInfo.info;
            if (info[1]) {
                info[1].items.forEach((itemId, index) => {
                    let node = <div className="flex" key={1 + '_' + index + '' + itemId}>
                        <div className="flex-col-3">{propName[itemId]}</div>
                        <div className="flex-g-1 des"></div>
                        <div><button>采集</button></div>
                    </div>
                    infoNode.push(node)
                })
            }
            if (info[2]) {
                info[2].items.forEach((itemId, index) => {
                    let node = <div className="flex" key={2 + '_' + index + '' + itemId}>
                        <div className="flex-col-3">{propName[itemId]}</div>
                        <div className="flex-g-1 des"></div>
                        <div><button>伐木</button></div>
                    </div>
                    infoNode.push(node)
                })

            }

            if (info[3]) {
                info[3].items.forEach((itemId, index) => {
                    let node = <div className="flex" key={3 + '_' + index + '' + itemId}>
                        <div className="flex-col-3">{propName[itemId]}</div>
                        <div className="flex-g-1 des"></div>
                        <div><button>采矿</button></div>
                    </div>
                    infoNode.push(node)
                })

            }

            adventrueInfoNode = <div className="adventrueInfo">
                <div className="title text-center">{mapInfo.name}</div>
                <div className="boxContent">{infoNode}</div>
                <div className="flex-center">
                    <button>调查</button>
                    <button onClick={this.explore}>探索</button>
                </div>
            </div>
        }

        return (
            <div id="map" ref='mapContent' ref={(r) => { this.refMapContent = r }}>
                <MapBox onChange={this.mapBoxChange} />
                {adventrueInfoNode}
            </div>
        );
    }
}

export default Main;